<template>
  <div>
    <!-- 点击按钮自身隐藏, 出现输入框并马上处于激活状态
      首先按钮和input框是互斥的 input用v-if v-else 一开始不在我们的页面中
      这个例子要用v-if不能用v-show
      v-if 创建和销毁dom元素
      v-show 只是显示和隐藏
      

      nextTick作用 dom更新后 处理一些逻辑
     -->
    <h1>nextTick综合案例</h1>
    <button v-if="!showInput" @click="handleClick">点击搜索</button>
    <input ref="inp" type="text" v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showInput: false,
    };
  },
  methods: {
    handleClick() {
      // 1. 隐藏 按钮 显示input
      this.showInput = true;
      // 2. 做input聚焦 获取input元素（ref）
      // 因为dom的更新是异步的 所以要用$nextTick
      this.$nextTick(() => {
        console.log(this.$refs.inp);
        this.$refs.inp.focus();
      });
    },
  },
};
</script>

<style>
</style>
